<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>	
		<style>
			/*body*/
			#one span,#two span,#three span,#four span,#b ul li a span,#c ul li a span,#top_p_span01,#top_p_span02,
			#pimg_top_left span,#pimg_center_left span,#pimg_bottom_left span,#footer_right_center ul li span{
				background-image: url(img/img-sprite.png);
			}
			/*header*/
			#header{background: url(img/banner.jpg);background-size: cover;}
			
			/*content*/
			#content_right{background-image: url(img/pi1.jpg);}
			
			#left_left{background: url(img/pi2.jpg) no-repeat;}
			#left_center{background: url(img/pi3.jpg) no-repeat;}
			#left_right{background: url(img/pi4.jpg) no-repeat;}
			
			#center_left{background: url(img/PI8.jpg) no-repeat;}
			#center_center{background:url(img/pi9.jpg) no-repeat;}
			#center_right{background: url(img/pi10.jpg) no-repeat;}
			
			#right_left{background: url(img/pi5.jpg) no-repeat;}
			#right_center{background: url(img/pi6.jpg) no-repeat;}
			#right_right{background: url(img/pi7.jpg) no-repeat;}
			
			#content_two{background: url(img/back.jpg) no-repeat;background-size:cover;}
			
			#three_top_right{background: url(img/bl1.jpg) no-repeat;}
			
			#three_bottem{background: url(img/back1.jpg) no-repeat;}
			
			/*footer*/
			#pimg_top_right{background: url(img/f1.jpg) no-repeat;}
			#pimg_center_right{background: url(img/f2.jpg) no-repeat;}
			#pimg_bottom_right{background: url(img/f3.jpg) no-repeat;}
	
		</style>
	</head>

	<body>
		<div id='container'>
			<div id="header-placeholder"></div>
<!--content-->		
			<div id="content">
				<!-- 原有内容 -->
			</div>
			<div id="footer-placeholder"></div>
		</div>
		<script>
			// 动态加载 header
			fetch('header.html')
				.then(response => response.text())
				.then(data => {
					document.getElementById('header-placeholder').innerHTML = data;
				});

			// 动态加载 footer
			fetch('footer.html')
				.then(response => response.text())
				.then(data => {
					document.getElementById('footer-placeholder').innerHTML = data;
				});

			//content_one_bottom
			var lis = document.getElementById('nav').getElementsByTagName('li');
			var divs = document.getElementById('ads').getElementsByTagName('div');
			var i, j;
			for(i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					//no用来确定当前划过的是哪个item，由此确定哪个广告版显示
					var no = this.id.substring(this.id.length - 1) - 1;
					for(j = 0; j < divs.length; j++) {
						divs[j].className = 'hide';
					}
					divs[no].className = 'show';
				}
			}
			
			//content_three  three_top_left_top
			var target = document.getElementById('left_top_img');
			var div = target.getElementsByTagName('div');
			var showNo = 0;
			//相当于往下一页的功能
			function nextPage() {
				//所有的div都隐藏
				for(var i = 0; i < div.length; i++)
					div[i].style.display = 'none';
				// 
				div[showNo].style.display = 'block';
				showNo = (showNo + 1) % div.length;
			}
			//切换到上一页的功能
			function prePage() {
				//所有的div都隐藏
				for(var i = 0; i < div.length; i++)
					div[i].style.display = 'none';
				// 
				div[showNo].style.display = 'block';
				showNo = (showNo - 1+div.length) % div.length;
			}
			var t1 = setInterval(nextPage, 3000);
			
			var lis=document.getElementById('top_p_span').getElementsByTagName('li');
			lis[0].onclick=prePage;
			lis[1].onclick=nextPage;
			prePage();

			// 购物车点击事件
			document.addEventListener('click', function(e) {
				if (e.target.id === 'cart-toggle') {
					e.preventDefault();
					var cart = document.getElementById('cart-dropdown');
					cart.style.display = cart.style.display === 'none' ? 'block' : 'none';
				}
			});
		</script>
	</body>

</html>